import { useState,useEffect } from "react";


function MyComponent() {

    const [count, setCount] = useState(0)
    const [color,setColor] = useState('red')

    //1.每次渲染执行
    // useEffect(()=>{
    //     document.title = `you clicked button ${count} times`
    // })

    //2.只在第一次渲染执行
    useEffect(()=>{
        document.title = `document title`
    },[])

    //3.只在count变化时执行
    useEffect(()=>{
        document.title = `you clicked button ${count} ${color} times`
    },[count])


//     useEffect()是React中的一个钩子函数，它在组件渲染完成后执行副作用操作。以下是useEffect()的一些优点：
// 1. 灵活性：useEffect()可以用于处理各种副作用操作，例如订阅数据、手动更改DOM、发送网络请求等。它提供了一个统一的地方来处理组件的副作用逻辑。
// 2. 组件生命周期替代：以前，在类组件中，我们需要在不同的生命周期方法中处理不同的副作用操作。而使用useEffect()，我们可以将所有的副作用逻辑集中在一个地方，使代码更加清晰和易于维护。
// 3. 依赖管理：useEffect()接受第二个参数，该参数是一个数组，用于指定依赖项。只有当依赖项发生变化时，才会重新执行useEffect()内部的逻辑。这使得我们可以更精确地控制副作用的触发时机，避免不必要的重复执行。
// 4. 异步操作：useEffect()支持异步操作，可以在内部使用async/await语法或返回一个Promise对象。这使得我们可以更方便地处理异步任务，如数据获取、数据更新等。
// 5. 清理功能：useEffect()可以返回一个函数，在组件卸载时执行清理操作。这对于取消订阅、清除定时器等资源释放非常有用，避免了内存泄漏和其他潜在问题。


    return (
        <div>
            <h1 style={{color: color}}>Count: {count}</h1>
            <button onClick={() => setCount(count + 1)}>Add</button>
            <button onClick={() => setCount(count - 1)}>Sub</button><br/>
            <button onClick={() => setColor(color ===    'red' ? 'green' : 'red')}>change color</button>
        </div>
    )

}

export default MyComponent